---
title: 'Database Visualizer'
sidebarTitle: 'Database Visualizer'
mode: 'wide'
---

## Description

    This is a basic example of a Svelvet graph. Svelvet has endless usecases, one of which could
    be a database visualization tool. Below you can see [Nodes](../components/node) that depict the
    relationship between different SQL tables. Notice that you can manually connect and disconnect
    the tables from one to another via the [Anchor](../components/anchor) points. Upon a connection,
    an [Edge](../components/edge) is also rendered.

<iframe
	src="https://stackblitz.com/edit/vitejs-vite-epysfw?embed=1&file=src/App.svelte&hideExplorer=1&hideNavigation=1&view=preview"
	style={{ width: '100%', height: '500px', border: '0', borderRadius: '15px' }}
></iframe>

Checkout the sandbox [here](https://stackblitz.com/edit/vitejs-vite-y2cs5r?file=src%2FApp.svelte).
